﻿@{
    ViewData["Title"] = "Home Page";
}
<style type="text/css">
    .veh-log .inline {
        margin-bottom: 10px;
        line-height: 20px;
    }

        .veh-log .inline label {
            margin-left: 45px;
        }

    .veh-log .item{
        display:inline-block;
        padding: 2px 8px 2px 8px;
        border-radius:3px;
    }
    .veh-log .gray{
        background-color:gray;
        color: white;
    }

    .veh-log .green {
        background-color: green;
        color: white;
    }

    .veh-log .orange {
        background-color: orange;
        color: white;
    }

    .veh-log .red {
        background-color: darkred;
        color:white;
    }
</style>
<script src="~/lib/signalr/signalr.min.js"></script>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<div class="text-center">
    <h1 class="display-4">Logger Demo</h1>
</div>
<div class="veh-log" id="log"></div>


<script type="text/javascript">
    var connection;

    connection = new signalR.HubConnectionBuilder()
        .withUrl("/DataHub?user=User1")
        .withAutomaticReconnect()
        .configureLogging(signalR.LogLevel.Information)
        .build();

    function start() {
        try {
            connection.start();
            console.log("connected");
        } catch (err) {
            alert(err);
            setTimeout(start(), 5000);
        }
    }

    function stop() {
        try {
            connection.stop();
            console.log("disconnected");
        } catch (err) {
            alert(err);
        }
    }

    start();

    connection.onclose(function (error) {
        alert('Connection closed due to error "' + error + '". Try refreshing this page to restart the connection.');
    });

    // ## 实时日志

    connection.on("ReceiveMessage", function (level, message) {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        if (month < 10) {
            month = '0' + month;
        }
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        var millisecond = date.getMilliseconds();
        var dateStr = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second + '.' + millisecond;
        var html = '<div class="inline">';

        var arr;
        if (message.indexOf('\r\n') > -1) {
            arr = message.split('\r\n');
        }
        else {
            arr = message.split('\n');
        }
        switch (level) {
            case 'Debug':
                html = html + '<span class="item gray">dbug</span>：[' + dateStr + ']  ' + arr[0] + '<br />';
                break;
            case 'Information':
                html = html + '<span class="item green">info</span>：[' + dateStr + ']  ' + arr[0] + '<br />';
                break;
            case 'Warning':
                html = html + '<span class="item orange">warn</span>：[' + dateStr + ']  ' + arr[0] + '<br />';
                break;
            case 'Error':
                html = html + '<span class="item red">fail</span>：[' + dateStr + ']  ' + arr[0] + '<br />';
                break;
        }
        html = html + '<label>' + arr[1] + '</label>';
        html = html + '</div>';
        $('#log').append(html);
    })

</script>